<template>
	<div class="personnelList">
		<el-breadcrumb separator="/" class="ml_5">
			<el-breadcrumb-item :to="{ path: '/' }">
				<i class="lh lh-seller fw_100"></i>
			</el-breadcrumb-item>
			<el-breadcrumb-item>B端-商户</el-breadcrumb-item>
			<el-breadcrumb-item>拜访记录</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="content_Box box-shadow mt_15">
			<div class="py_5 px_10">
				<el-row>
					<el-col :span="4">
						<el-button type="default" @click="downloadOrder()" round size="mini">导出</el-button>
					</el-col>
					<el-col :span="20">
						<el-form :inline="true" :model="ruleForm" class="form-inline fr" @keyup.enter.native="shearchBtn()">
							<el-form-item class="w_130">
								<el-autocomplete
									class="inline-input"
									v-model="shop_name"
									:fetch-suggestions="querySearch"
									placeholder="店铺名称"
									:trigger-on-focus="true"
									@select="handleSelect"
								></el-autocomplete>
							</el-form-item>

							<!-- 代理商 -->
							<lh-agent-list @sendValue="setValue" :reset="agent_reset"></lh-agent-list>

							<el-form-item>
								<el-select class="w_110" v-model="city_val" placeholder="请选择城市" @change="changeCity">
									<el-option
										v-for="item in cityList"
										:key="item.id"
										:label="item.name"
										:value="`${item.id}|${item.name}`"
									></el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-select v-model="area_arr" multiple collapse-tags placeholder="商圈">
									<el-button
										size="mini"
										type="primary"
										class="round-right all-area"
										@click="selectAllArea()"
										native-type="button"
										>{{ areaStatus ? '全选' : '取消全选' }}</el-button
									>
									<el-option
										v-for="item in areaList"
										:key="item.id"
										:label="item.area_name"
										:value="`${item.id}|${item.area_name}`"
									></el-option>
								</el-select>
							</el-form-item>

							<el-form-item class="w_90">
								<el-select v-model="opportunity_status" placeholder="商机状态">
									<el-option label="商机状态" value=""></el-option>
									<el-option label="待跟进" value="1"></el-option>
									<el-option label="有意向" value="2"></el-option>
									<el-option label="无意向" value="3"></el-option>
									<el-option label="无效商机" value="4"></el-option>
								</el-select>
							</el-form-item>

							<el-form-item class="w_130">
								<el-autocomplete
									class="inline-input"
									v-model="business_director"
									:fetch-suggestions="querySearch5"
									placeholder="销售"
									:trigger-on-focus="true"
									@select="handleSelect5"
								></el-autocomplete>
							</el-form-item>

							<el-form-item prop="date1" class="w_120">
								<el-date-picker
									type="date"
									value-format="yyyy-MM-dd"
									placeholder="拜访开始时间"
									v-model="ruleForm.date1"
									style="width: 100%;"
								></el-date-picker> </el-form-item
							>~
							<el-form-item prop="date2" class="w_120">
								<el-date-picker
									type="date"
									value-format="yyyy-MM-dd"
									placeholder="拜访结束时间"
									v-model="ruleForm.date2"
									style="width: 100%;"
								></el-date-picker>
							</el-form-item>
							<el-button size="mini" type="primary" native-type="button" class="round-right" @click="shearchBtn"
								>搜索</el-button
							>
							<el-button size="mini" round @click="resetBtn">重置</el-button>
						</el-form>
					</el-col>
				</el-row>
			</div>
			<div class="tableMaxBox">
				<template>
					<el-table :data="shopList" stripe>
						<el-table-column prop="id" type="index" label="序号" width="80px" align="center"></el-table-column>
						<el-table-column prop="shop_name" label="店铺名称" width="210px">
							<template slot-scope="{ row }">
								<span class="pointer u text-primary" @click="goToTag(row)">{{ row.shop_name }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="agent_name" label="代理商" width="150"></el-table-column>
						<el-table-column prop="area_name" label="商圈" width="100"></el-table-column>
						<el-table-column prop="contact" label="联系人" align="center"></el-table-column>
						<el-table-column prop="contact_phone" label="联系方式" width="120px">
							<template slot-scope="{ row }">
								<span>{{ row.contact_phone | vf_mobile }}</span>
							</template>
						</el-table-column>
						<el-table-column label="拜访结果" width="90" align="center">
							<template slot-scope="{ row }">
								<span>{{ row.opportunity_status }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="contact_sw" label="销售" align="center"></el-table-column>
						<el-table-column prop="manager_user" label="拜访人" align="center"></el-table-column>
						<el-table-column prop="remark" label="拜访内容" width="140px" align="center"></el-table-column>
						<el-table-column prop="add_time" label="拜访时间" width="150px" align="center"></el-table-column>
						<el-table-column prop="address" label="定位地址" width="140px"></el-table-column>
						<el-table-column prop="distance" label="距离客户距离" width="70px">
							<template slot-scope="{ row }">
								<span>{{ row.distance }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="next_time" label="再次跟进时间" width="150px" align="center"></el-table-column>
					</el-table>
					<!-- 分页组件 -->
					<!-- <page :total="total" :pageNums="pageNum" @pagedata="onChildValue"></page> -->
					<page :total="total" :pageNums="pageNum" :disableMountedFetch="true" @pagedata="onChildValue"></page>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')
import { fetchShopList } from '@/api/shop.js'
export default {
	name: 'ShopList',
	data() {
		return {
			windowSizeHeight: document.documentElement.clientHeight, //浏览器可视化窗口的大小
			screenHeight: document.documentElement.clientHeight,
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			url: common.url,
			head_url: common.head_url,
			//搜索对应值
			shop_id: '', //店铺id
			shop_name: '', //店铺名
			shop_sn: '', //店铺sn
			business_director: '', //销售
			business_id: '', //销售id
			opportunity_status: '', //商机状态
			sign_status: '10', //店铺状态为 已注册
			ruleForm: {
				date1: '', //开始时间
				date2: '' //结束时间
			},

			shopList: [], //店铺列表
			shopList2: [], //搜索栏目的店铺列表
			BusinessUserList: [], //销售列表
			//向分页组件传值
			total: 0, //总数量
			pageNum: 1, //当前页
			pageSizeNow: 20,
			// 审核状态
			tag: '30',
			text: '',
			areaList: [], //区域列表
			areaStatus: true,
			cityList: [], // 城市列表
			city_val: '',
			city_id: '',
			area_arr: '', //商圈信息
			area_id: '',
			area_name: '',
			agent_id: '',
			agent_reset: 0
		}
	},
	computed: {
		city_value() {
			return this.city_val
		}
	},

	watch: {
		//商圈改变
		areaList(newValue, oldValue) {
			this.listShop()
		},
		// 城市改变
		city_value(newVal, oldVal) {
			if (newVal && this.city_id) {
				this.listArea(this.city_id) //商圈列表
			}
		}
	},
	created() {
		if (this.$route.query.shop_name) {
			this.shop_name = this.$route.query.shop_name
			this.shop_id = this.$route.query.shop_id
			this.shop_sn = this.$route.query.shop_sn
		}
	},
	mounted() {
		this.getBusinessUser()
	},
	methods: {
		setValue(data) {
			this.agent_id = data.agent_id

			// 清除店铺名称
			this.shop_name = this.$route.query.shop_name || ''
			this.shop_id = this.$route.query.shop_id || ''
			this.shop_sn = this.$route.query.shop_sn || ''

			this.cityList = data.city_list
			if (this.cityList.length > 0) {
				this.city_val = this.cityList[0].name
				this.city_id = this.cityList[0].id
			}
			this.listArea(this.city_id) //商圈列表
			this.getShopList() //获取店铺列表
		},
		// 获取商铺列表
		async getShopList() {
			try {
				let ret = await fetchShopList({
					sign_status: 30,
					city_id: this.city_id,
					agent_id: this.agent_id
				})
				if (ret.list) {
					ret.list.forEach(item => {
						item.value = item.name
					})
					this.shopList2 = ret.list
				} else {
					this.shopList2 = []
				}
			} catch (err) {
				console.log('error:', err)
			}
		},
		listShop() {
			//获取商铺列表
			let fn = new FormData()
			fn.append('pageSize', this.pageSizeNow) //每页多少条
			fn.append('page', this.pageNum) //页数
			if (this.shop_name == '') {
				this.shop_sn = ''
			}
			fn.append('shop_sn', this.shop_sn)
			// if (this.area_name == '') {
			// 	this.area_id = ''
			// }
			let s_departmentIds_Arr = new Array()
			this.area_arr.forEach(element => {
				let [id, name] = element.split('|') // es6 数组解构赋值
				s_departmentIds_Arr.push(id.toString())
			})
			fn.append('area_id', '' + s_departmentIds_Arr)
			fn.append('opportunity_status', this.opportunity_status)
			fn.append('manager_id', this.business_id) //销售id
			var ruleForm_date1 = ''
			var ruleForm_date2 = ''
			if (this.ruleForm.date1 == null) {
				this.ruleForm.date1 = ''
			}
			if (this.ruleForm.date2 == null) {
				this.ruleForm.date2 = ''
			}
			if (this.ruleForm.date1 != '' && this.ruleForm.date2 != '') {
				//开始时间与结束时间必须同时存在
				ruleForm_date1 = this.ruleForm.date1
				ruleForm_date2 = this.ruleForm.date2
			}
			fn.append('start_time', ruleForm_date1)
			fn.append('end_time', ruleForm_date2)
			fn.append('agent_id', +this.agent_id)

			this.$http.post(this.url + '/shop/getVisitList', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						if (res.data.data != null) {
							res.data.data.list.forEach(item => {
								item.value = item.name
							})
							this.shopList = res.data.data.list
							this.total = res.data.data.count
						} else {
							this.shopList = []
							this.total = 0
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		//获取销售列表
		getBusinessUser() {
			let fn = new FormData()
			this.$http.post(this.url + '/manageUser/getBusinessUser', fn).then(
				res => {
					if (res.data.msg == '查询成功!' || res.data.code == '200') {
						if (res.data.data != null) {
							res.data.data.forEach(item => {
								item.value = item.nickname
							})
							this.BusinessUserList = res.data.data
						} else {
							this.BusinessUserList = []
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},

		shearchBtn() {
			// 搜索
			this.pageNum = 1
			this.listShop()
		},

		async resetBtn() {
			//重置
			await this.resetData() //重置请求数据
		},

		async resetData() {
			//重置请求数据
			this.pageNum = 1
			this.shop_id = ''
			this.shop_name = ''
			this.shop_sn = ''
			this.area_id = ''
			this.type = ''
			this.is_order = ''
			this.business_director = ''
			this.opportunity_status = ''
			this.business_id = ''
			this.ruleForm.date1 = ''
			this.ruleForm.date2 = ''

			// 重置代理商
			this.agent_reset += 1
		},

		goToEdit(row) {
			//编辑页面
			this.$router.push({
				path: '/merchantsEdit',
				query: {
					id: row.id
				}
			})
		},

		goToTag(row) {
			//跳转店铺详情
			const { href } = this.$router.resolve({ path: '/shopTag', query: { id: row.id } })
			window.open(href, '_blank')
		},

		//全选-取消全选商圈
		selectAllArea() {
			let arr = []
			this.areaList.forEach(item => {
				arr.push(`${item.id}|${item.area_name}`)
			})
			if (this.areaStatus == true) {
				this.area_arr = arr
			} else {
				this.area_arr = []
			}
			this.areaStatus = !this.areaStatus
			// this.shearchBtn()
		},

		// 监听城市val变化
		changeCity() {
			let [id, name] = this.city_val.split('|') // es6 数组解构赋值
			this.city_id = id
			this.city_name = name
			this.shop_name = ''
			this.shop_id = ''
			this.shop_sn = ''
			this.getShopList() //获取店铺列表
		},

		//获取商圈列表
		async listArea(city_id) {
			this.area_arr = []
			let fn = new FormData()
			fn.append('city_id', city_id)
			fn.append('agent_id', this.agent_id)
			this.$http.post(this.url + '/area/list', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						if (res.data.data != null) {
							res.data.data.list.forEach(item => {
								item.value = item.area_name
							})
							this.areaList = res.data.data.list
							console.log('商圈列表：', this.areaList)
							// if (this.area_arr == '' || this.area_arr == null) {
							// 	// 默认选中非254-平谷的
							// 	console.log('lieb', this.areaList)
							// 	this.areaList.forEach(element => {
							// 		// 平谷
							// 		if (element.area_name != '平谷') {
							// 			var pusharr = element.id + '|' + element.area_name
							// 			this.area_arr.push(pusharr)
							// 		}
							// 	})
							// }
						} else {
							this.areaList = []
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		changeBtndialogarea() {
			let [id, name] = this.area_arr.split('|') // es6 数组解构赋值
			this.area_id = id.toString()
			this.area_name = name.toString()
		},
		//店铺的自动完成
		querySearch(queryString, cb) {
			var restaurants = this.shopList2
			var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		createFilter(queryString) {
			return restaurant => {
				return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
			}
		},
		handleSelect(item) {
			this.shop_id = item.id
			this.shop_sn = item.shop_sn
		},
		//店铺-销售
		querySearch5(queryString, cb) {
			var restaurants = this.BusinessUserList
			var results = queryString ? restaurants.filter(this.createFilter5(queryString)) : restaurants
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		createFilter5(queryString) {
			return restaurant => {
				return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
			}
		},
		handleSelect5(item) {
			this.business_director = item.nickname
			this.business_id = item.user_id
		},
		//分页组件->子组件传值
		onChildValue(item) {
			this.pageNum = item[0]
			this.pageSizeNow = item[1]
			this.listShop()
		},
		// 导出
		downloadOrder() {
			var ruleForm_date1 = ''
			var ruleForm_date2 = ''
			if (this.ruleForm.date1 != '' && this.ruleForm.date2 != '') {
				//开始时间与结束时间必须同时存在
				ruleForm_date1 = this.ruleForm.date1
				ruleForm_date2 = this.ruleForm.date2
			}
			if (this.shop_name == '') {
				this.shop_sn = ''
			}

			let s_departmentIds_Arr = new Array()
			this.area_arr.forEach(element => {
				let [id, name] = element.split('|') // es6 数组解构赋值
				s_departmentIds_Arr.push(id.toString())
			})
			// fn.append('area_id', '' + s_departmentIds_Arr)
			let obj = {
				token: JSON.parse(sessionStorage.getItem('manageInfo')).token,
				export: 1,
				shop_sn: this.shop_sn,
				area_id: '' + s_departmentIds_Arr,
				opportunity_status: this.opportunity_status,
				manager_id: this.business_id,
				start_time: ruleForm_date1,
				end_time: ruleForm_date2,
				agent_id: this.agent_id
			}
			let param = $.param(obj)
			window.location.href = this.url + '/shop/getVisitList?' + param
		}
	}
}
</script>

<style scoped>
.search_box {
	width: 790px;
}
.auditCentent .labels {
	min-height: 100px;
}
.auditCentent .labels .labels_label {
	float: left;
	cursor: pointer;
}
.check_label {
	background: var(--purple4);
	color: #fff;
	border: none;
}
.pdf {
	width: 860px;
	height: 600px;
}
@media (max-width: 767.78px) {
	.titleBox {
		height: 40px;
	}
}

.click_state {
	cursor: pointer;
}

.JobCentent .wrap_top {
	display: flex;
	margin-right: 0px;
}
</style>



// WEBPACK FOOTER //
// src/components/shop/VisitList.vue